<template>
  <el-container>
    <el-header height="auto">
      <label class="title">搜索机柜</label>
      <el-row>
        <el-col :span="5">
          <my-input ref="nameInput" prefixDesc="名称" @change="getRackName"></my-input>
        </el-col>
        <el-col :span="5">
          <my-input ref="usernameInput" prefixDesc="使用者" @change="getUserName"></my-input>
        </el-col>
        <el-col :span="5">
          <my-select ref="statusSelect" prefixDesc="状态" :dataSource="constant.RACK_STATUS_LIST" @select="getSelectStatus" @clear="clearStatus"></my-select>
        </el-col>
        <el-col :span="5">
          <my-select ref="securitySelect" prefixDesc="安全柜" :dataSource="constant.IS_SECURITY_LIST" @select="getSelectIsSecurity" @clear="clearSecurity"></my-select>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="5">
          <my-select-brand ref="brandSelect" deviceType="rack" @select="getSelectBrand"></my-select-brand>
        </el-col>
        <el-col :span="5">
          <my-select-model ref="modelSelect" :brandId="search.brandid" deviceType="rack" @select="getSelectModel"></my-select-model>
        </el-col>
        <el-col :span="5">
          <my-select-datacenter ref="dataCenterSelect" @select="getSelectDataCenter"></my-select-datacenter>
        </el-col>
        <el-col :span="5">
          <my-select-module ref="moduleSelect" :dataCenterId="search.datacenterid" @select="getSelectModule"></my-select-module>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="10">
          <el-row class="el-row-item">
            <el-col :span="4">
              <label>启用日期：</label>
            </el-col>
            <el-col :span="8">
              <el-date-picker v-model="search.startdate" size="small" value-format="yyyy-MM-dd" :picker-options="startPickOptions" type="date" placeholder="起始日期"></el-date-picker>
            </el-col>
            <el-col :span="1" class="el-col-center">
              <label>至</label>
            </el-col>
            <el-col :span="8">
              <el-date-picker v-model="search.enddate" size="small" value-format="yyyy-MM-dd" :picker-options="endPickOptions" type="date" placeholder="截止日期"></el-date-picker>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="4" class="el-col-left">
          <el-button type="primary" size="mini" @click="loadRackList(1, null)">搜索</el-button>
          <el-button type="info" size="mini" @click="resetSearch">重置</el-button>
        </el-col>
      </el-row>
    </el-header>
    <el-main v-loading="loading">
      <label class="title">机柜列表</label>
      <el-table :data="rackList" size="mini" stripe>
        <el-table-column prop="rackname" label="名称" align="center"></el-table-column>
        <el-table-column prop="users" label="使用者" align="center"></el-table-column>
        <el-table-column prop="aampere" label="额定电力" align="center"></el-table-column>
        <el-table-column prop="usedflagName" label="状态" align="center"></el-table-column>
        <el-table-column label="安全柜" align="center"><template slot-scope="scope">{{ scope.row.issecurity | isSecurity }}</template></el-table-column>
        <el-table-column prop="datacentername" label="数据中心" align="center"></el-table-column>
        <el-table-column prop="idcmodulename" label="机房模块" align="center"></el-table-column>
        <el-table-column prop="uNumbers" label="机柜U数" align="center"></el-table-column>
      </el-table>
    </el-main>
    <el-footer height="40px">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="currentPageNum"
        :page-sizes="[10, 20, 50, 100]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalCount"/>
    </el-footer>
  </el-container>
</template>

<script>
import MyInput from '../../../../common/components/MyInput';
import MySelect from '../../../../common/components/MySelect';
import MySelectBrand from '../../../../common/components/MySelectBrand';
import MySelectModel from '../../../../common/components/MySelectModel';
import MySelectModule from '../../../../common/components/MySelectModule';
import MySelectDataCenter from "../../../../common/components/MySelectDataCenter";
import { getRackList } from '../../../../api/itopApi';
import { Message } from 'element-ui';
export default {
  name: 'RackList',
  components: {
    'my-input': MyInput,
    'my-select': MySelect,
    'my-select-brand': MySelectBrand,
    'my-select-model': MySelectModel,
    'my-select-module': MySelectModule,
    "my-select-datacenter": MySelectDataCenter
  },
  data() {
    return {
      loading: false,
      totalCount: 0,
      currentPageNum: 1,
      currentPageSize: 10,
      search: {
        rackname: '',
        users: '',
        usedflag: '',
        issecurity: '',
        brandid: '',
        modelid: '',
        startdate: '',
        enddate: '',
        datacenterid: '',
        idcmoduleid: '',
        pageNum: 1,
        pageSize: 10,
      },
      rackList: [],
      startPickOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        }
      },
      endPickOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        }
      }
    }
  },
  methods: {
    getRackName(value) {
      this.search.rackname = value;
    },
    getUserName(value) {
      this.search.users = value;
    },
    getSelectStatus(value) {
      this.search.usedflag = value;
    },
    clearStatus() {
      this.search.usedflag = '';
    },
    getSelectIsSecurity(value) {
      this.search.issecurity = value;
    },
    clearSecurity() {
      this.search.issecurity = '';
    },
    getSelectBrand(item) {
      this.search.brandid = item == null ? '' : item.id;
    },
    getSelectModel(item) {
      this.search.modelid = item.id;
    },
    getSelectDataCenter(item) {
      this.search.datacenterid = item == null ? '' : item.datacenterid;
    },
    getSelectModule(item) {
      this.search.idcmoduleid = item.id;
    },
    loadRackList(pageNum, pageSize) {
      if (pageNum) {
        this.search.pageNum = pageNum;
      }
      if (pageSize) {
        this.search.pageSize = pageSize;
      }
      this.loading = true;
      getRackList(this.search).then(data => {
          this.loading = false;
          this.rackList = data.list;
          this.totalCount = data.total;
          this.currentPageNum = this.search.pageNum;
      }).catch(error => {
        this.loading = false;
        Message.error(error.message);
      })
    },
    resetSearch() {
      this.search = {
        rackname: '',
        users: '',
        usedflag: '',
        issecurity: '',
        brandid: '',
        modelid: '',
        startdate: '',
        enddate: '',
        datacenterid: '',
        idcmoduleid: '',
        pageNum: 1,
        pageSize: this.currentPageSize,
      };
      this.$refs.nameInput.reset();
      this.$refs.usernameInput.reset();
      this.$refs.statusSelect.reset();
      this.$refs.securitySelect.reset();
      this.$refs.brandSelect.reset();
      this.$refs.modelSelect.reset();
      this.$refs.dataCenterSelect.reset();
      this.$refs.moduleSelect.reset();
      this.loadRackList(1, null);
    },
    handleSizeChange(pageSize) {
      this.currentPageNum = 1;
      this.currentPageSize = pageSize;
      this.loadRackList(1, pageSize);
    },
    handleCurrentChange(pageNum) {
      this.loadRackList(pageNum, null);
    }
  },
  mounted() {
    this.loadRackList();
  }
}
</script>
<style lang="scss" scoped>
.el-container {
  text-align: left;
  font-size: 14px;
  .el-header {
    padding: 0 0 20px;
    background-color: #fff;
    & > .el-row {
      margin-top: 16px;
    }
    .el-col {
      text-align: right;
      line-height: 32px;
      &-left {
        text-align: left;
      }
      &-center {
        text-align: center;
      }
      .el-date-editor.el-input {
        width: 100%;
      }
    }
  }
  .el-main {
    padding: 0;
    margin-top: 16px;
    background-color: #fff;
  }
  .title {
    display: inline-block;
    width: calc(100% - 20px);
    padding: 10px;
    border-bottom: 1px solid #f2f2f2;
  }
  .el-footer {
    text-align: right;
    padding: 10px 0 0;
  }
}
</style>

